<template>
	<view class="">
		<z-paging ref="paging" v-model="list" @query="getList">
			<template slot="top">
				<u-swiper
					:list="['/static/banner/banner3.jpg?v1', '/static/banner/banner5.jpg','/static/banner/banner6.jpg','/static/banner/banner10.jpg','/static/banner/banner11.jpg','/static/banner/banner12.jpg']"
					height="420rpx" circular indicator indicator-mode="dot" radius="0"></u-swiper>
				<!-- <u-tabs :current="current" @change="setCurrent" :list="[{ name: '票务中心' }, { name: '卡务中心' }]"
					lineHeight="8rpx" lineWidth="70rpx" :scrollable="false"></u-tabs> -->
			</template>
			<!-- v-if="current === 0" -->
			<template>
				<view class="d-p-l-30 d-p-r-30">
					<view class="d-list-box d-m-t-20 d-p-20 d-flex d-col-top" v-for="(item, index) in list" :key="index"
						@click="ticketDetail(item.id)">
						<u-image :src="item.picture" width="210rpx" height="248rpx"></u-image>
						<view class="d-m-l-20 d-flex-1">
							<view class="d-font-30 u-line-1">{{ item.name }}</view>
							<view class="d-flex d-m-t-18">
								<view class="d-tag d-flex">{{ item.specify }}</view>
							</view>
							<!-- <view class="d-font-24 d-be d-m-t-20">{{ item.tip }}</view> -->
							<!-- <view class="d-font-24 d-be d-m-t-20" style="margin-left: 47rpx;">{{ item.text }}</view> -->
							<view class=" d-font-30 d-red" style="margin-top: 100rpx;">
								<text class="d-font-24">￥</text>
								<text class="d-bold">{{ item.selling_price }}</text>
							</view>
						</view>
					</view>
				</view>
			</template>
			<!-- <template v-else>
				<view class="d-p-l-30 d-p-r-30">
					<view class="d-m-t-20 d-flex d-col-top" v-for="(item, index) in list" :key="index"
						@click="cardDetail(item.id)" style="box-shadow: 0px 6px 28px 0px rgb(8 73 162 / 11%);
		background: #fff;
		border-radius: 5px;
		padding: 10px;">
						<u-image :src="item.picture" width="290rpx" height="184rpx" radius="10rpx"></u-image>
						<view class="d-m-l-20 d-flex-1">
							<view class="d-font-30 u-line-2" style="height: 80rpx;">{{ item.name }}</view>
							<view class="d-font-24 d-be d-m-t-10">有效期：{{ item.end_date || '-' }}</view>
							<view class="d-m-t-20 d-font-30 d-red">
								<text class="d-font-24">￥</text>
								<text class="d-bold">{{ item.selling_price }}</text>
							</view>
						</view>
					</view>
				</view>
			</template> -->

		</z-paging>
		<!--  -->
		<u-popup :show="show" mode="center" width="630rpx" round="30rpx" height='700rpx' :safeAreaInsetBottom='false'>
			<view class="agent-box d-font-28"
				style="background-image: url('/static/caozuoxuzhi.png');background-size: 100% 100%;height: 730rpx;">
				<view class="" style="margin-top: 150rpx;">
					<image style="width: 580rpx;height: 70rpx;margin-left: 25rpx;" src="../../static/yyy.png" mode=""></image>
					<scroll-view scroll-y class="agent-content d-p-l-30 d-p-r-30">
						<view class="" style="padding: 0 20rpx;">
							<view class="" style="line-height: 44rpx;font-size: 26rpx;">
								<text style="font-weight: 600;">1.</text style="">用户登录需登记身份信息，如需添加家属信
								息,请在个人中心“我的家属”添加并审核,校外
								人员请在登录时申请认证。
							</view>
							<view class="" style="line-height: 44rpx;font-size: 26rpx;margin-top: 10rpx;">
								<text style="font-weight: 600;">2.</text>所有用户需提供有效体检报告,申请认证，未
								通过用户无法进行购票购卡操作。
							</view>
							<view class="" style="line-height: 44rpx;font-size: 26rpx;margin-top: 10rpx;">
								<text style="font-weight: 600;">3.</text>通过认证的用户可进行购票购卡操作,并预约
								对应的游泳日期和时段。
							</view>
							<view class="" style="line-height: 44rpx;font-size: 26rpx;margin-top: 10rpx;">
								<text style="font-weight: 600;">4.</text>用户成功预约游泳后,请在对应的时间段到馆
								进行游泳。
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="d-flex d-row-center d-p-t-20 d-p-b-20">
					<view>
						<u-button type="primary" shape="circle" :custom-style="{
								fontSize: '24rpx',
								background: '#59A0FF',
								width: '180rpx',
								height: '70rpx'
							}" @click="confirm">
							我知道了
						</u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="Agentshow" mode="top" width="100vw" round="30rpx" height='700rpx' :safeAreaInsetBottom='false' bgColor='transparent' overlayOpacity='0.9'>
				<view class="" style="display: flex;justify-content: center;">
					<image style="width: 580rpx;height: 210rpx;margin-left: 25rpx;margin-top: 190rpx;" src="../../static/fenxiang.png" mode=""></image>
				</view>
		</u-popup>
		<!-- <view v-if="openif" class="mengban"></view> -->
		<!-- <view class="d-p-l-30 d-p-r-30 noshuju" v-if="openif">
			<view class="noshuju_text">
				场馆
			</view>
			<scroll-view scroll-y="true" class="no_shuju">
				<view class="d-list-box d-m-t-20 d-p-20 d-flex d-col-top" style="height: 80rpx;line-height: 80rpx;"
					v-for="(item, index) in Venueslist" :key="index" @click="nomengban(item,index)" :class="{ active: dateActivs === index }">
					<view class="d-m-l-20 d-flex-1">
						<view class="d-font-30 u-line-1">{{item.name}}</view>
					</view>
				</view>
			</scroll-view>
		</view> -->
		 <!-- <button @click="callGetToken">调用 getToken 方法</button> -->
	</view>
</template>

<script>
	import {
		card,
		ticket,getMember,getVenues
	} from '@/common/api';
	export default {
		data() {
			return {
				current: 0,
				list: [],
				openif: true,
				show: false,
				Agentshow:false,
				Venueslist:[],
				id:'',
				dateActivs:0
			};
		},
		onLoad(e) {
			if (e.token) {
				uni.$u.vuex('$token', e.token);
			}
			// getEnv_app()
			// getToken(100,200)
		},
		onShow() {
			// const ua = navigator.userAgent.toLowerCase();
			// const isWeixin = ua.indexOf('micromessenger') !== -1;
			
			// if (isWeixin) {
			// 	this.Agentshow = true
			//     console.log('在微信中打开');
			//     // 执行微信特定的逻辑
			// } else {
			//     console.log('非微信环境');
			//     // 非微信环境下的处理
			// }
			this.openif = true
			this.memberlist()
			this.getVenueslist()
		},
		onLaunch() {
			console.log(12122)
			// console.log('App Launch') 
			var ua = window.navigator.userAgent
			if (ua.indexOf('MicroMessenger') == -1) {
				// 等于-1时 说明不是从微信扫码打开的，就跳转其它页面
				// uni.reLaunch({
				// 	url:'pages/nowechat/nowechat'
				// })
			}
			console.log(ua)
		},
		methods: {
			memberlist(){
				getMember()
					.then(res => {
						this.member_id = res.member_id
						uni.setStorageSync('member_id' , this.member_id)
					})
			},
			getVenueslist() {
				getVenues()
					.then(res => {
						this.Venueslist = res
					})
			},
			confirm() {
				this.show = false
			},
			nomengban(item,index) {
				this.id = item.id
				this.dateActivs = index
				this.getList(1,10)
				this.openif = false
			},
			async getList(page, limit) {
				try {
					let result = await ticket({
						// params: {
							page,
							limit,
							venue_id:this.id
						// }
					})
					
					this.$refs.paging.complete(result.data);
				} catch (e) {
					this.$refs.paging.complete(false);
				}
			},
			// async getList(page, limit) {
			// 	try {
			// 		let result = this.current === 0 ? await ticket({
			// 			page,
			// 			limit
			// 		}) : await card({
			// 			page,
			// 			limit
			// 		});
			// 		this.$refs.paging.complete(result.data);
			// 	} catch (e) {
			// 		this.$refs.paging.complete(false);
			// 	}
			// },
			setCurrent(e) {
				this.current = e.index;
				this.$refs.paging.reload(false);
			},
			ticketDetail(id) {
				uni.$u.route({
					url: '/pages/home/ticketDetail',
					params: {
						id
					}
				});
			},
			cardDetail(id) {
				uni.$u.route({
					url: '/pages/home/cardDetail',
					params: {
						id
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.mengban {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.65);
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 98;
	}

	.noshuju {
		position: absolute;
		top: 0;
		left: 100rpx;
		z-index: 99;
		margin-top: 28vh;
		width: 500rpx;
		height: 500rpx;
		background: #fff;
		border-radius: 10rpx;
	}

	.noshuju_text {
		width: 500rpx;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
	}

	.no_shuju {
		width: 500rpx;
		height: 350rpx;
		background: #fff;
		border-radius: 10rpx;
	}

	.d-list-box {
		// box-shadow: 0rpx 13rpx 57rpx 0rpx rgba(8, 73, 162, 0.21);
		// box-shadow: 0px 1px 2px 0px rgba(8, 26, 26, 0.3);
		// box-shadow: 0px 0px 2px 1px rgba(255, 0, 0, 0.6);
		background: #ffffff;
		border-radius: 10rpx;
		border: 1rpx #bebebe solid;
	}
	.active {
		// box-shadow: 0px 1px 2px 0px rgba(255, 0, 0, 0.3);
		background: #ffffff;
		border-radius: 10rpx;
		border: 1rpx #59A0FF solid;
	}

	.d-tag {
		background: #f3f3f3;
		border-radius: 4rpx;
		height: 36rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;
		padding: 0 18rpx;
	}

	.d-be {
		color: #bebebe;
	}

	.d-red {
		color: #ff4105;
	}

	.d-bold {
		font-weight: bold;
	}

	.agent-box {
		width: 630rpx;
		// border-radius: 30rpx;
		// background-color: #fff;
	}

	.agent-content {
		height: 350rpx;
		box-sizing: border-box;
	}
</style>